<template>
    <lay-table :page="page" :columns="columns" :data-source="dataSource" resize skin="line" :loading="loading"
        style="height: 100%;">
        <template v-slot:toolbar>
            <lay-button size="xs" type="primary" @click="handleDialogValue(null)">
                <lay-icon type="layui-icon-addition"></lay-icon> 新增
            </lay-button>
        </template>
        <template #name="{ row }">
            <lay-input v-model="row.name" @blur="editHandle(row)" />
        </template>
        <template #unit="{ row }">
            <lay-input v-model="row.unit" @blur="editHandle(row)" />
        </template>
        <template #value="{ row }">
            <lay-input-number v-model="row.value" position="right" @blur="editHandle(row)"></lay-input-number>
        </template>
        <template #remark="{ row }">
            <lay-input v-model="row.remark" @blur="editHandle(row)" />
        </template>
        <template #source="{ row }">
            <!-- <lay-input v-model="row.source" /> -->
            <lay-textarea v-model="row.source" :rows="2" style="width: 100%;" @blur="editHandle(row)" />
        </template>
    </lay-table>
    <Dialog v-model="dialogVisible" :dialogVisible="dialogVisible" :id="id" :dialogTitle="dialogTitle"
        @initDataList="initDataList"></Dialog>
</template>

<script setup>
import { onMounted, ref, reactive, computed } from 'vue'
import api from '@/api';
import Dialog from './components/dialog.vue'
import { layer } from '@layui/layui-vue'

const edingKeys = ref([])
const dataSource = ref([])
const loading = ref(true)
const queryForm = ref({
    query: '',
    pageNum: 1,
    pageSize: 10
})
// 新增、编辑 dialog
const id = ref(-1)
const dialogVisible = ref(false)
const dialogTitle = ref('')

// 计算表格高度
const tableHeight = computed(() => {
    return window.innerHeight - 100 + 'px'
})

const handleDialogValue = (treeId) => {
    if (treeId) {
        id.value = treeId;
        dialogTitle.value = "数据修改"
    } else {
        id.value = -1;
        dialogTitle.value = "添加数据"
    }
    dialogVisible.value = true
}

const page = reactive({ current: 1, limit: 10, limits: [10, 30, 100], total: dataSource.value.length, layout: ["page", "limits", "prev", "refresh", "count", "next", "skip",] });
// 分页、排序、筛选等参数
const change = (page) => {
    queryForm.value.pageNum = page.current;
    queryForm.value.pageSize = page.limit;
    loading.value = true;
    initDataList();
}
// attach change handler to page prop per layui-vue new API
page.change = change;

const editHandle = async (data) => {
    // edingKeys.value.push(data);
    // console.log(data);
    await api.post("price/save", data).then((res) => {
        if (res.code === 200) {
            console.log(res.msg);
        } else {
            initDataList();
            layer.msg(res.msg, { icon: 2, time: 5000 });
        }
    })

}

const deleteEdit = (data) => {
    console.log('@1', edingKeys.value)
    edingKeys.value.splice(edingKeys.value.indexOf(data), 1);
    console.log('@2', edingKeys.value)
}

const columns = [
    { title: "编号", key: "id", fixed: "left", width: "40px", align: "center" },
    { title: "名称", key: "name", customSlot: "name", align: "center" },
    { title: "数值", key: "value", customSlot: "value", align: "center" },
    { title: "单位", key: "unit", customSlot: "unit", align: "center" },
    { title: "描述", key: "remark", customSlot: "remark", width: "20%", align: "center" },
    { title: "数据来源及依据", key: "source", customSlot: "source", align: "center", width: "40%", },
]


const initDataList = async () => {
    loading.value = true
    await api.post("price/search", queryForm.value).then((res) => {
        console.log(res);
        // 将每一项的 id 转为数字
        dataSource.value = (res.data || []).map(item => ({
            ...item,
            id: Number(item.id)
        }));

        page.total = res.total;
        loading.value = false
    })
    // await api.get('/system/address/list')
}

onMounted(() => {
    initDataList();
})
</script>

<style scoped></style>